﻿<template>
    <div class="page page-home  page-bg">
        <div class="navbar">
            <div class="navbar-bg"></div>
            <div class="navbar-inner navbar-inner-centered-title app-navbar">
                <div class="left">
                    <a class="link icon-only panel-open text-color-primary" data-panel="left">
                        <i class="icon f7-icons if-not-md">menu</i>
                        <i class="icon material-icons md-only ">menu</i>
                    </a>
                </div>
                <div class="title text-color-primary" style="opacity:1">YAPACS</div>
                <div class="right">
                    <a class="link icon-only popup-open color-primary" id="refresh-list">
                        <i class="icon f7-icons if-not-md">arrow_clockwise</i>
                        <i class="icon material-icons md-only">arrow_clockwise</i>
                    </a>
                    <a class="link icon-only popup-open color-primary" data-popup="#advance-search-popup">
                        <i class="icon f7-icons if-not-md">search</i>
                        <i class="icon material-icons md-only">search</i>
                    </a>
                </div>
                <form data-search-container=".components-list" data-search-in="a"
                      class="searchbar searchbar-expandable searchbar-components searchbar-init">
                    <div class="searchbar-inner">
                        <div class="searchbar-input-wrap">
                            <input type="search" placeholder="Search components" />
                            <i class="searchbar-icon"></i>
                            <span class="input-clear-button"></span>
                        </div>
                        <span class="searchbar-disable-button">取消</span>
                    </div>
                </form>
            </div>
        </div>
        <div class="page-content infinite-scroll-content" data-infinite-distance="50" @infinite=${loadMore}>
            <div class="list list-outline list-strong list-dividers-ios accordion-list" id="list-view" style="margin-bottom:50px;margin-top:0px;">
                <ul id="report-list">
                </ul>
            </div>
            <div class="preloader infinite-scroll-preloader preloader-large"></div>
        </div>
        <div class="popup advance-search-popup popup-tablet-fullscreen" id="advance-search-popup">
            <div class="view view-init safe-areas" id="view-advance-search" data-url="/advanceSearch/">
            </div>
        </div>
        <div class="popup image-popup popup-tablet-fullscreen">
            <div class="view view-init safe-areas" id="home-image-view" data-url="/chart/">
            </div>
        </div>
        <div style="display:none" id="home-iframe-hidden-container" examId="">
            <iframe src="../mobile/index" sandbox="allow-forms allow-scripts allow-top-navigation allow-same-origin">
            </iframe>
        </div>
    </div>
   
</template>
<script>
    export default (props, { $, $on, $f7, $h, $f7router, $store, $theme, $update }) => {
        /*
            $   Dom7 标准库
            $on 页面事件处理器绑定
            $f7 app实例对象
            $h  html模板字面量
        */
        var $$ = $;
        let selectedExamId;
        let selectedReportStatu;
        let selectedReportId;
        let todayFilter;
        let permissions = [];
        let actionSheet;
        let quickFilterloaded = false;
        var options; // 查询参数
        $on('pageInit', () => {
            requireQuickFilter();
            // 权限加载
            getReportIndexPermissions();
            // 快速搜索加载完成后,加载默认项目(当天的)
            $f7.on('quickFilterLoaded', (filerId) => {
                options = {
                    filterId: filerId,
                    skip: 0,
                    take: 20
                }
                // 默认加载当天检查
                loadPageInit(options, true);
            })
            // 点击快速搜索
            $f7.on('selectFilter', (filterId) => {
                page = 1;
                options = {
                    filterId: filterId,
                    skip: 0,
                    take: 20
                }
                loadPageInit(options, true);
            })
            // 高级搜索
            $f7.on('advanceSearch', (userData) => {
                page = 1;
                options = {
                    userData: userData,
                    skip: 0,
                    take: 20
                };
                loadPageInit(options, true);
            })
            // 刷新当前列表
            $("#refresh-list").on('click', () => {
                page = 1;
                $(".page-home .infinite-scroll-content").prop('scrollTop', 0);// 回到顶部
                options.skip = 0;
                loadPageInit(options, true);
            })

            $("#view-main").on("tab:show", () => {
                if (!quickFilterloaded) {
                    requireQuickFilter();
                }
            })
            // 加载操作按钮
            actionSheetInit(permissions);
        })
        // 到导航到已初始化过的页面
        $$(document).on('page:reinit', () => {
            page = 1;
            options.skip = 0;
            // 状态修改
            updateStatu();
            $(".toolbar").show();
        })
        // 上拉加载
        let allowInfinite = false;
        let hasMoreItems = true;
        let page = 1;
        let imageOpenCount = 0;
        // 上滑加载更多
        const loadMore = () => {
            if (!allowInfinite) {

                return;
            }
            allowInfinite = false;
            setTimeout(() => {
                if (hasMoreItems) { // 还有可加载项目
                    // 根据分页进行项目加载
                    options.skip = options.take * page
                    loadPageInit(options, false)
                    page++;
                }
            }, 200)
        }
        const noMoreData = () => {
            //let str = ` <li class="li-item-inner">
            //                  <div class="item-inner noMoreData">
            //                    <span style="color:#9d9d9b"> 无更多数据</span>
            //                  </div>
            //            </li>`
            $("#report-list").append(str);
        }
        // 初始化加载（首次加载）
        const loadPageInit = (options, isInit) => {
            fetch(`/api/report/get-list-mobile`, {
                method: 'POST',
                body: JSON.stringify(options),
                headers: { 'Content-Type': 'application/json' }
            }).then((res) => {
                if (res.redirected) {
                    $f7.dialog.confirm('<span class="text-color-primary">请先登录！</span>', "提示", () => {
                        $f7.tab.show("#view-2", true);
                    });
                    $(".preloader").hide();
                    return;
                }
                else {
                    res.json().then((result) => {
                        if (result.code == 0) {
                            let appendRows = result.data.rows;
                            if (isInit) {  // 初始化加载
                                $("#report-list").html("");
                                if (appendRows.length === 0) { // 第一页无数据
                                    let noDataStr = '<div class="no-data"><span style="color:#9d9d9b">未查询到数据</span></div>';
                                    $("#report-list").append(noDataStr);
                                    hasMoreItems = false;
                                    allowInfinite = false;
                                    $(".preloader").hide();
                                }
                                else {
                                    $("#report-list").append(getHtml(appendRows));
                                    if (appendRows.length < options.take) { // 所有数据已经加载完
                                        allowInfinite = false;
                                        $(".preloader").hide();
                                        /*noMoreData();*/
                                    }
                                    else if (appendRows.length === options.take) { // 可能还有数据没加载
                                        allowInfinite = true;
                                        hasMoreItems = true;
                                        $(".preloader").show();
                                    }
                                }
                            }
                            else {
                                if (appendRows.length === 0) {
                                    hasMoreItems = false;
                                    allowInfinite = false;
                                    $(".preloader").hide();
                                    /* noMoreData();*/
                                }
                                else {
                                    $("#report-list").append(getHtml(appendRows));
                                    if (appendRows.length < options.take) { // 所有数据已经加载完
                                        allowInfinite = false;
                                        $(".preloader").hide();
                                        /*noMoreData();*/
                                    }
                                    else if (appendRows.length === options.take) { // 可能还有数据没加载
                                        allowInfinite = true;
                                        hasMoreItems = true;
                                        $(".preloader").show();
                                    }
                                }
                            }


                            $("#report-list li .patient-features").off('taphold');
                            $("#report-list li .patient-features").on('taphold', function (e) {
                                showToast(e);
                            });

                            // 长按事件
                            $('#list-view ul li.real-item').off('taphold');
                            $('#list-view ul li.real-item').on('taphold', (e) => {
                                let target = $(e.currentTarget);
                                selectedExamId = target.attr('oid');
                                selectedReportId = target.attr('reportId');
                                selectedReportStatu = target.find(".report-statu span").html();

                                rowTapHold(e);
                            })
                            //$("#list-view ul li").on("click", (e) => {
                            //    let target = $(e.currentTarget);
                            //    selectedExamId = target.attr('oid');
                            //    $("#list-view ul li .accordion-item-content").hide();
                            //    $(`#list-view ul li .accordion-item-content[detailId="id_${selectedExamId}"]`).show();
                            //})
                            // ...点击事件
                            $("#list-view ul li .item-after .icon").on('click', (e) => {
                                e.preventDefault();
                                e.stopPropagation();
                                let target = $(e.currentTarget).parent().parent().parent().parent();
                                $("#list-view ul li a").removeClass('home-li-bg-selected');
                                $(target).find("a").addClass("home-li-bg-selected");
                                selectedExamId = target.attr('oid');
                                selectedReportId = target.attr('reportId');
                                selectedReportStatu = target.find(".report-statu span").html();
                                actionSheet.open();
                            })


                        }
                        else {
                            console.log('get-list接口访问失败：' + result.error);
                        }
                    });
                }
            })
        }
        // 列表状态刷新
        const updateStatu = () => {
            let examId = $store.getters.examId.value;
            let statu = $store.getters.report.value.reportStatus;
            let report = $store.getters.report.value;
            let $li = $(`#report-list li[examId="id_${examId}"]`);
            // 报告状态
            let $status1 = $li.find(".report-statu-container span");
            $status1.attr('class', '').addClass('badge').addClass(reportStatu(statu).class).html(reportStatu(statu).text);
            // 下拉详情更新
            let $status2 = $li.find(" .block span");
            $status2.attr('class', '').addClass('badge content-statu-span').addClass(reportStatu(statu).class).html(reportStatu(statu).text);
            let $block = $li.find('.block');
            $block.find(".iamge-see-text").html(report.imageSeeing ? report.imageSeeing : '');
            $block.find(".image-diagnosis-text").html(report.imageDiagnosis ? report.imageDiagnosis : '');
            $block.find(".report-doctor-text").html(report.reportDoctor ? report.reportDoctor : '');
            $block.find(".report-time-text").html(report.reportTime ? report.reportTime : '');
            $block.find(".audit-doctor-text").html(report.auditDoctor ? report.auditDoctor : '');
            $block.find(".audit-time-text").html(report.auditTime ? report.auditTime : '');
        }
        // 生成html字符串
        const getHtml = (rows) => {
            let htmlStr = "";
            rows.map((row) => {
                /*accordion-item*/
                htmlStr += `
                                 <li class="li-item-inner real-item "   oid="${row.oid}" reportId="${row.reportId}" examId="id_${row.oid}" >
                                     <a class="item-link item-content ">
                                         <div class="item-media">
                                                <img src="/Mobile/img/${row.sex === 'Female' ? 'female.jpeg' : 'male.jpeg'}"/>
                                         </div>
                                         <div class="item-inner " >
                                             <div class="item-title home-list-item-title">
                                                 <div class="item-header">${row.accessionNumber +' / '+ row.deviceType + (row.examTime !== null ? (' / ' + timeFormat(row.examTime)) : '')}</div>
                                                 <div class="patient">
                                                  <span class="item-inner-name">${row.patientName}</span>
                                                  <span class="item-inner-sex ${row.sex}">${getSex(row)}</span>
                                                 </div>
                                             </div>
                                             <div class="patient-features-container" style="display:none;" >
                                                <div class="patient-features icon-tooltip" style="display:${displayPatientFeature(row)}" featureText="${row.patientFeaturesText}"><span class="round-pill" id="${row.oid}toolTip">特</span></div>
                                             </div>
                                             <div class="is-emergency-container">
                                                <div class="is-emergency"><span class="badge color-red" style="display:${isEmergency(row)}">急诊</span></div>
                                             </div>
                                             <div class="report-statu-container">
                                                <div class="report-statu"><span class="badge ${reportStatu(row.reportStatus).class} ">${reportStatu(row.reportStatus).text}</span></div>
                                             </div>
                                             <div class="item-after">
                                                        <i class="icon f7-icons if-not-md">ellipsis</i>
                                             </div>
                                         </div>
                                     </a>
                                     <div class="accordion-item-content" detailId="id_${row.oid}" style="display:none;" >
                                        <div class="block block-outline" >
                                                <b>报告状态：</b><span class="content-statu-span badge ${reportStatu(row.reportStatus).class}" >${reportStatu(row.reportStatus).text}</span>
                                                <br />
                                                <b>检查项目：</b>
                                                <div style="padding:0 15px;" class="exam-items-text"> ${row.examItemsText === null ? "" : row.examItemsText}</div>
                                                <b>临床诊断：</b> ${row.clinicalDiagnosis === null ? "" : row.clinicalDiagnosis}
                                                <br />
                                                <b>影像所见：</b>
                                                <div style="padding:0 15px;" class="iamge-see-text"> ${row.imageSeeing === null ? '' : row.imageSeeing}</div>
                                                <b>影像诊断：</b>
                                                <div style="padding:0 15px;" class="image-diagnosis-text">${row.imageDiagnosis === null ? "" : row.imageDiagnosis}</div>
                                                <div style="width:100%;">
                                                    <div style="width:100%;">
                                                        <b>报告医生：</b>
                                                        <div style="display:inline;" class="report-doctor-text">${row.reportDoctor === null ? '' : row.reportDoctor}</span>
                                                    </div>
                                                    <div style="width:100%;">
                                                        <b>报告日期：</b>
                                                        <div style="display:inline;" class="report-time-text">${row.reportTime === null ? '' : timeFormat(row.reportTime)}</span>
                                                    </div>
                                                    <div style="width:100%;">
                                                        <b>审核医生：</b>
                                                        <div style="display:inline;" class="audit-doctor-text">${row.auditDoctor === null ? '' : row.auditDoctor}</span>
                                                    </div>
                                                    <div style="width:100%;margin-bottom:10px">
                                                        <b>审核日期：</b>
                                                        <div style="display:inline;" class="audit-time-text"> ${row.auditTime === null ? '' : timeFormat(row.auditTime)}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                 </li>
                           `;
            });
            return htmlStr;
        }
        // 时间格式转换呢
        const timeFormat = (str) => {
            const date = new Date(str);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hour = String(date.getHours()).padStart(2, '0');
            const minute = String(date.getMinutes()).padStart(2, '0');
            return `${year}-${month}-${day}  ${hour}:${minute}`
        }
        // 行长按事件
        const rowTapHold = (e) => {
            var target = e.currentTarget;
            $('#list-view ul li a').removeClass('home-li-bg-selected');
            $(e.currentTarget).find('a').addClass('home-li-bg-selected');
            actionSheet.open();
        }
        // 患者特征点击事件
        const showToast = (e) => {
            console.log(e);
            let text = $(e.currentTarget).attr('featureText');
            // 创建
            toastTop = $f7.toast.create({
                text: text,
                position: 'center',
                closeTimeout: 2500,
            });
            toastTop.open();
            e.stopPropagation();
        }
        // 性别
        const getSex = (row) => {
            if (row.sex === 'Male') {
                return '男';
            }
            else if (row.sex == 'Female') {
                return '女'
            }
            return '其他'
        }
        // 是否显示病人特征
        const displayPatientFeature = (row) => {
            if (row.patientFeaturesText) {
                return true;
            }
            return 'none';
        }
        // 是否显示急诊
        const isEmergency = (row) => {
            if (row.isEmergency) {
                return 'true';
            }
            return 'none';
        }
        let toastTop;
        // 报告状态颜色类
        const reportStatu = (statu) => {
            let res = {
                class: "",
                text: ""
            }
            if (statu === "InitialWriting" || statu === 0) {// 初写中
                res.text = '初写中';
                res.class = 'initial-writing-bg';
            }
            else if (statu === "InitialWritten" || statu === 1) { // 已初写
                res.text = '已初写';
                res.class = 'initial-written-bg';
            }
            else if (statu === "Reporting" || statu === 2) { // 报告中
                res.text = '报告中';
                res.class = 'reporting-bg';
            }
            else if (statu === "Reported" || statu === 3) { // 已报告
                res.text = '已报告';
                res.class = 'reported-bg';
            }
            else if (statu === "Auditing" || statu === 4) { // 审核中
                res.text = '审核中';
                res.class = 'auditing-bg';
            }
            else if (statu === "Audited" || statu === 5) { // 已审核
                res.text = '待复审';
                res.class = 'audited-bg';
            }
            else if (statu === "Reviewing" || statu === 6) { // 复审中
                res.text = '复审中';
                res.class = 'reviewing-bg';
            }
            else if (statu === "Reviewed" || statu === 7) { // 已复审
                res.text = '已复审';
                res.class = 'reviewed-bg';
            }
            else if (statu === "Completed" || statu === 8) { //完成
                res.class = 'completed-bg';
                res.text = '完成';
                return res;
            }
            else {
                res.text = "未报告";
                res.class = 'no-report-bg';
            }

            return res;
        }
        // 报告相关权限
        const getReportIndexPermissions = () => {
            fetch('/api/get-permissions', { method: "GET" })
                .then((res) => {
                    return res.json();
                })
                .then((data) => {
                    $store.state.permissions = data;
                    permissions = data;
                    actionSheetInit(data);
                })
                .catch((error) => {
                    return;
                });
        }
        // 加载按钮
        const actionSheetInit = (permissions) => {
            let buttons = [];
            let buttonGroup1 = [];
            let buttonGroup2 = [];
            buttonGroup1.push({
                text: "查看图像",
                color: "primary",
                onClick: function (action, e) {
                    if (imageOpenCount === 0) {
                        $f7.popup.open(".image-popup", true);
                    }
                    listenToImageByInterval();
                }
            });
            // 查看报告
            buttonGroup1.push({
                text: "查看报告",
                color: "primary",
                onClick: function (actions, e) {
                    viewReport();
                }
            });
            if (permissions.indexOf("报告_书写报告") !== -1 || permissions.indexOf("报告_初写报告")) {
                buttonGroup1.push({
                    text: "书写报告",
                    color: "primary",
                    onClick: function (actions, e) {
                        writeReport();
                    }
                })
            }
            if (permissions.indexOf("报告_审核报告") !== -1) {
                buttonGroup1.push({
                    text: "审核报告",
                    color: "primary",
                    onClick: function (actions, e) {
                        audit();
                    }
                })
            }
            if (buttonGroup1.length > 0) {
                buttonGroup1.unshift({
                    text: "操作",
                    label: true
                });
                buttonGroup2.push({
                    text: "取消",
                    color: "red",
                    onClick: () => {
                        actionSheet.close();
                    }
                });
            }
            if (buttonGroup1.length > 0 && buttonGroup2.length > 0) {
                buttons.push(buttonGroup1);
                buttons.push(buttonGroup2);
                actionSheet = $f7.actions.create({
                    buttons: buttons,
                    closeByOutsideClick: true,
                    backdrop: true
                });
            }
        }

        // 图像弹窗打开完成事件
        const listenToImageByInterval = () => {
            $('.image-popup').show();
            $('.popup-backdrop').show();
            imageOpenCount++;
            let interval = setInterval(() => {
                if ($(".view-image-page #image-page-content").length > 0) {
                    let $hiddenContainer = $(".page-home #home-iframe-hidden-container");
                    let hiddenIframe = $(".page-home #home-iframe-hidden-container").html();
                    let $pageContent = $(".view-image-page #image-page-content");
                    let id = $hiddenContainer.attr("examId");
                    if (id !== selectedExamId) {
                        $hiddenContainer.attr("examId", selectedExamId);
                        $pageContent.html(''); // 清空
                        fetch(`/api/exam/get-dicom-client-url`, {
                            method: 'GET',
                            headers: { 'Content-Type': 'application/json' }
                        }).then((res) => {
                            res.json().then((result) => {
                                if (result.success && result.data) {
                                    let url = result.data;
                                    if (result.data.includes('?')) {
                                        url += `&examIds=${selectedExamId}`;
                                    } else {
                                        url += `?examIds=${selectedExamId}`;
                                    }
                                    $pageContent.append(hiddenIframe);
                                    $pageContent.find('iframe').attr('src', url);
                                    $(".page-home #home-iframe-hidden-container").find('iframe')[0].contentWindow.location = url;
                                    imageOpenCount++;
                                }
                            });
                        })
                    }
                    clearInterval(interval);
                }
            }, 500);
        }

        // 查看报告
        const viewReport = () => {
            if (selectedReportStatu !== '未报告') {
                $f7router.navigate({
                    name: 'post',
                    path: "/report-detail/",
                    query: {
                        examId: selectedExamId,
                        reportId: selectedReportId,
                        actionId: 'view',
                        permissions: permissions.join(',')
                    }
                })
            }
            else {
                $f7.dialog.alert(`<span class="text-color-red"><b>当前检查尚未书写报告</b></span>`, '');
                return;
            }
        }
        // 书写报告
        const writeReport = () => {
            fetch(`/api/report/write/${selectedExamId}`, {
                method: 'GET',
                headers: { 'Content-Type': 'application/json' }
            }).then((res) => {
                res.json().then((result) => {
                    if (result.success) {
                        $f7router.navigate({
                            name: 'post',
                            path: "/report-detail/",
                            query: {
                                examId: selectedExamId,
                                reportId: result.data,
                                actionId: 'write',
                                permissions: permissions.join(',')
                            }
                        })
                    }
                    else {
                        $f7.dialog.alert(`<span class="text-color-red"><b>${result.error}</b></span>`, '')
                        return;
                    }
                });
            })
        }
        // 审核报告
        const audit = () => {
            fetch(`/api/report/audit/${selectedExamId}`, {
                method: 'GET',
                headers: { 'Content-Type': 'application/json' }
            }).then((res) => {
                res.json().then((result) => {
                    if (result.success) {
                        $f7router.navigate({
                            name: 'post',
                            path: "/report-detail/",
                            query: {
                                examId: selectedExamId,
                                reportId: result.data,
                                actionId: 'audit',
                                permissions: permissions.join(',')
                            }
                        })
                    }
                    else {
                        $f7.dialog.alert(`<span class="text-color-red"><b>${result.error}</span>`, '')
                        return;
                    }
                });
            })
        }

        const requireQuickFilter = () => {
            return new Promise((resolve, reject) => {
                // 快速搜索
                fetch('/api/filter/get-filter-by-type/exam', { method: "GET" })
                    .then((res) => {
                        if (res.redirected) {
                            return
                        }
                        else {
                            res.json().then((data) => {
                                loadQuickFilter(data);
                                // home初始状态，加载当天检查
                                let todayFilter = data.data[0].id
                                app.emit('quickFilterLoaded', todayFilter);
                                quickFilterloaded = true;
                                resolve();
                            });
                        }
                    })
            });
        }

        // 加载快速查询
        const loadQuickFilter = (res) => {
            let filterItems = res.data;

            let roots = filterItems.filter((item) => item.parentId === null);
            // 添加顶层
            let el = "";
            roots.map((rootItem) => {
                if (rootItem.isDirectory) {
                    el += `<div class="treeview-item treeview-item-opened" directoyId="${rootItem.id}" >
                        <div class="treeview-item-root" filterId="${rootItem.id}" id="${rootItem.id}">
                                    <div class="treeview-toggle"></div>
                                    <div class="treeview-item-content">
                                        <i class="icon f7-icons">folder</i>
                                        <div class="treeview-item-label left-panel-item ">${rootItem.text}</div>
                                    </div>
                        </div>
                        <div class="treeview-item-children" directoyId="${rootItem.id}">

                        </div>
                   </div>`
                }
                else {
                    el += `<div class="treeview-item  panel-close" filterId="${rootItem.id}">
                                <a href="#" class="treeview-item-root treeview-item-selectable">
                                    <div class="treeview-item-content">
                                        <i class="icon f7-icons">search</i>
                                        <div class="treeview-item-label left-panel-item ">${rootItem.text}</div>
                                    </div>
                                </a>
                   </div>`
                }
            });
            $$('.treeview').append(el);
            recursionAdd(roots, filterItems);
            $("#left-panel-treeview .panel-close").on("click", (e) => {
                selectFilter($(e.currentTarget).attr("filterId"));
            })
        }
        // (快速查询)递归添加子级
        const recursionAdd = (roots, items) => {
            for (let i = 0; i < roots.length; i++) {
                if (roots[i].isDirectory) {
                    let children = items.filter((item) => item.parentId === roots[i].id); // 直接子级
                    children.map((child) => {
                        let html = "";
                        if (child.isDirectory) {// 目录
                            html += `<div class="treeview-item " directoyId="${child.id}"  >
                                <div class="treeview-item-root" filterId="${child.id}" id="${child.id}">
                                            <div class="treeview-toggle"></div>
                                            <div class="treeview-item-content">
                                                <i class="icon f7-icons">folder</i>
                                                <div class="treeview-item-label left-panel-item ">${child.text}</div>
                                            </div>
                                </div>
                                <div class="treeview-item-children" directoyId="${child.id}">

                                </div>
                           </div>`
                        }
                        else { // 具体项
                            html += `<div class="treeview-item panel-close" filterId="${child.id}" >
                                        <a href="#" class="treeview-item-root treeview-item-selectable">
                                            <div class="treeview-item-content">
                                                <i class="icon f7-icons">search</i>
                                                <div class="treeview-item-label left-panel-item ">${child.text}</div>
                                            </div>
                                        </a>
                            </div>`
                        }
                        $$(".treeview-item-children[directoyId='" + roots[i].id + "'] ").append(html);
                        if (child.isDirectory) {
                            recursionAdd([child], items);
                        }
                    })
                }
            }
        }
        // 触发selectFilter全局事件
        function selectFilter(filterId) {
            $f7.emit('selectFilter', filterId);
        }
        return $render;
    };
</script>
